{% extends 'base.html' %}

{% block title %}个人资料 - 外卖订餐系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <!-- 左侧个人信息卡片 -->
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <div class="mb-4">
                        <div class="avatar-circle mx-auto">
                            <span class="avatar-text">{{ user.username|first|upper }}</span>
                        </div>
                    </div>
                    <h5 class="card-title mb-3">{{ user.username }}</h5>
                    <p class="card-text text-muted">
                        <i class="fas fa-envelope me-2"></i>{{ user.email }}
                    </p>
                    <p class="card-text text-muted">
                        <i class="fas fa-calendar-alt me-2"></i>加入时间：{{ user.date_joined|date:"Y-m-d" }}
                    </p>
                    <hr>
                    <div class="d-grid gap-2">
                        <a href="{% url 'password_change' %}" class="btn btn-outline-primary">
                            <i class="fas fa-key me-2"></i>修改密码
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧订单历史 -->
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-history me-2"></i>订单历史
                    </h5>
                </div>
                <div class="card-body">
                    {% if orders %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>订单号</th>
                                        <th>餐厅</th>
                                        <th>金额</th>
                                        <th>状态</th>
                                        <th>时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for order in orders %}
                                    <tr>
                                        <td>{{ order.order_number }}</td>
                                        <td>{{ order.restaurant.name }}</td>
                                        <td>¥{{ order.total_amount }}</td>
                                        <td>
                                            <span class="badge {% if order.status == '已完成' %}bg-success{% elif order.status == '进行中' %}bg-primary{% else %}bg-secondary{% endif %}">
                                                {{ order.status }}
                                            </span>
                                        </td>
                                        <td>{{ order.created_at|date:"Y-m-d H:i" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <img src="https://img.icons8.com/clouds/100/000000/empty-box.png" alt="空订单" class="mb-3">
                            <h5 class="text-muted">暂无订单记录</h5>
                            <p class="text-muted mb-4">去看看有什么好吃的吧！</p>
                            <a href="{% url 'restaurant_list' %}" class="btn btn-primary">
                                <i class="fas fa-utensils me-2"></i>浏览餐厅
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .avatar-circle {
        width: 100px;
        height: 100px;
        background-color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .avatar-text {
        color: white;
        font-size: 2.5rem;
        font-weight: bold;
    }
    .card {
        border-radius: 15px;
        border: none;
    }
    .card-header {
        border-bottom: 1px solid rgba(0,0,0,.125);
        background-color: transparent;
    }
    .table th {
        font-weight: 600;
        color: #495057;
    }
    .badge {
        padding: 0.5em 0.75em;
        font-weight: 500;
    }
</style>
{% endblock %}
